<template>

  <section class="app-inner">

    <el-dialog
      :title="schoolForm.title"
      :visible.sync="schoolForm.flag"
      width="70%"
      modal
      center
      :before-close="close">
      <div style="position: relative;">
      <el-tabs v-model="activeName" class="el-tabs-root">
        <el-tab-pane label="基本信息" name="1" class="info-school-tab">
          <el-descriptions :column="2">
            <el-descriptions-item label="学校名称">{{ schoolData.name || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校英文名称">{{ schoolData.enName || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校编码">{{ schoolData.unicode || '--'}}</el-descriptions-item>
            <el-descriptions-item label="邮政编码">{{ schoolData.postCode || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校地址">{{ schoolData.address || '--'}}</el-descriptions-item>
            <el-descriptions-item label="行政区">
              <span v-for="item in comData['行政区']" :key="item.code">
                {{item.code===schoolData.administrativeCode?item.name:''}}
              </span>
              </el-descriptions-item>
            <el-descriptions-item label="学校经纬度">{{ schoolData.longitudeLatitude || '--'}}</el-descriptions-item>
            <el-descriptions-item label="所在地城乡类型">
              <span v-for="item in comData['城乡类型']" :key="item.code">
                {{item.code===schoolData.areaCode?item.name:''}}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="是否有分校区">{{ schoolData.isDistrict===1?'是':'否'}}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ schoolData.contact || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校办学类型">
              <span v-for="item in comData['办学类']" :key="item.code">
                {{item.code===schoolData.type?item.name:''}}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">{{!isShow ? $options.filters.cellularPhone(schoolData.contactWay) : schoolData.contactWay || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校办别类型">
              <span v-for="item in comData['学校办别代码']" :key="item.code">
                {{item.code===schoolData.schTypeNo?item.name:''}}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="建校年月">{{ schoolData.schoolYear || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校举办部门">
              <span v-for="item in comData['举办者']" :key="item.code">
                {{item.code===schoolData.organizerCode?item.name:''}}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="校庆日">{{ schoolData.decorationDay || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校属地主管部门">
              <span v-for="item in comData['行政区']" :key="item.code">
                {{item.code===schoolData.eduDeptNo?item.name+'教育局':''}}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="学校法人">{{ schoolData.legalPerson || '--'}}</el-descriptions-item>
            <el-descriptions-item label="学校所属主管部门">
              <span v-for="item in comData['行政区']" :key="item.code">
                {{item.code===schoolData.eduMasterNo?item.name+'教育局':''}}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="法人证件号">{{ !isShow ? $options.filters.idCarDesensitization(schoolData.registerAccount) :  schoolData.registerAccount || '--'}}</el-descriptions-item>
            <el-descriptions-item label="传真电话">{{ schoolData.faxPhone || '--'}}</el-descriptions-item>
            <el-descriptions-item label="法人工号">{{ schoolData.legalPersonNo || '--'}}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{ schoolData.email || '--'}}</el-descriptions-item>
            <el-descriptions-item label="党委负责人">{{ schoolData.partyLeader || '--'}}</el-descriptions-item>
            <el-descriptions-item label="官网主页">{{ schoolData.website || '--'}}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="校史发展" name="2" class="school-history-development">
          <el-descriptions :column="1">
            <el-descriptions-item label="校史发展介绍"><span v-html="schoolData.schoolHistory|| '--'"></span></el-descriptions-item>
            <el-descriptions-item label="校史发展图片">
              <span class="picList">
              <el-avatar class="avatar" v-for="(item,index) in schoolData.historyList" :key="index" shape="square" :size="150" fit="fill">
                <el-image :src="`/gateway/api/basic/minio/getFileSource?fileName=${item}`" class="fimg"
                  :preview-src-list="[
                  `/gateway/api/basic/minio/getFileSource?fileName=${item}`,
                  ]">
                              <div slot="error" class="image-slot"></div>
                </el-image>
              </el-avatar>
              </span>
              <!-- <div v-for="(url, index) in schoolData.historyPic" :key="index" style="float:left; margin-left: 10px">
                <el-avatar shape="square" :size="200" fit="fill" :src="url"></el-avatar>
              </div> -->
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="学校荣誉" name="3" class="school-honors">
          <el-card v-for="(item, index) in schoolData.sepSchoolHonorInfoList" :key="index">
            <el-descriptions :column="1" >
              <el-descriptions-item label="学校荣誉名称" label-class-name="title7">{{ item.honorName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="荣誉获得时间" label-class-name="title7">{{ item.awardTime || '--'}}</el-descriptions-item>
              <el-descriptions-item label="荣誉等级" label-class-name="title7">
                  <el-select v-model="item.level" size="small" class="content-input" disabled>
                  <el-option
                    v-for="data in honorLevels"
                    :key="data.code"
                    :label="data.message"
                    :value="data.code">
                  </el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="荣誉照片" label-class-name="title7">
                <span class="picList">
                <el-avatar class="avatar" v-for="(item1,index1) in item.honorList" :key="index1" shape="square" :size="200" fit="fill">
                  <el-image
                  :src="`/gateway/api/basic/minio/getFileSource?fileName=${item1}`" class="fimg"
                  :preview-src-list="[
                  `/gateway/api/basic/minio/getFileSource?fileName=${item1}`,
                  ]"
                  >
                              <div slot="error" class="image-slot"></div>
                  </el-image>
                </el-avatar>
                </span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="教学理念" name="4" class="teaching-concept">
          <el-descriptions :column="1">
            <el-descriptions-item label="教学理念"><span v-html="schoolData.concept|| '--'"></span></el-descriptions-item>
            <el-descriptions-item label="教学理念图片">
              <span class="picList">
              <el-avatar class="avatar" v-for="(item,index) in schoolData.conceptPicList" :key="index" shape="square" :size="150" fit="fill">
                <el-image :src="`/gateway/api/basic/minio/getFileSource?fileName=${item}`" class="fimg"
                  :preview-src-list="[
                  `/gateway/api/basic/minio/getFileSource?fileName=${item}`,
                  ]">
                              <div slot="error" class="image-slot"></div>
                </el-image>
              </el-avatar>
              </span>
              <!-- <div v-for="(url, index) in schoolData.conceptPic" :key="index" style="float:left; margin-left: 10px">
                <el-avatar shape="square" :size="200" fit="fill" :src="url"></el-avatar>
              </div> -->
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="校园特色场景" name="5" class="campus-characteristic-scene">
          <el-card v-for="(item, index) in schoolData.sepSchoolSceneInfoList" :key="index">
            <el-descriptions :column="1" >
              <el-descriptions-item label="场景名称">{{ item.sceneName || '--'}}</el-descriptions-item>
              <el-descriptions-item label="场景介绍"><span v-html="item.description|| '--'"></span></el-descriptions-item>
              <el-descriptions-item label="场景照片">
                <span class="picList">
                <el-avatar class="avatar" v-for="(item1,index1) in item.imageUrlList" :key="index1" shape="square" :size="200" fit="fill">
                  <el-image :src="`/gateway/api/basic/minio/getFileSource?fileName=${item1}`" class="fimg"
                  :preview-src-list="[
                  `/gateway/api/basic/minio/getFileSource?fileName=${item1}`,
                  ]">
                              <div slot="error" class="image-slot"></div>
                  </el-image>
                </el-avatar>
                </span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="人员概览" name="6" class="peopleInfo">
          <el-descriptions :column="1">
            <el-descriptions-item :label="item.name" v-for="(item, index) in schoolData.personnelRespList" :key="index">{{ item.code || '--'}}{{item.code==='38'?'个':'人'}}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
      <div class="switch-btn cursor iconfont" :class="[isShow ? 'icon-biyan': 'icon-yanjing']" @click="handleClickIsShow"></div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="close()" type="primary" class="btn-close">返回</el-button>
        <el-button @click.native.prevent="sub()" type="primary" class="btn-preservation">保存</el-button>
      </span> -->

    </el-dialog>
  </section>

</template>

<script>
import { getHonor } from '@/views/children/basic/js/schoolInfo'
import { sepDataDicInfoQuery } from '@/views/children/basic/js/controllerInfo'
export default {
  name: 'schoolInfoForm',
  components: {},
  props: {
    schoolForm: {
      type: Object
    },
    data: {
      type: Object
    }
  },
  watch: {
    data: {
      deep: true,
      handler (newVal, oldVal) {
        this.schoolData = newVal
      }
    }
  },
  data () {
    return {
      isShow: false,
      activeName: '1',
      // 基础表单信息
      infoForm: {

      },
      // 学校数据
      schoolData: {},
      content: '',
      isClear: false, // 清除富文本编辑器内容
      dialogImageUrl: '',
      dialogVisible: false,
      options: [],
      honorLevels: [],
      comData: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    idCarDesensitization (value) {
      return value ? value.replace(/^(.{6})(?:\d+)(.{3})$/, '$1********$2') : ''
    },
    close () {
      console.log(this.schoolData.personnelRespList)
      this.$emit('closeSchoolForm', false)
      this.activeName = '1'
    },
    sub () {
      console.log('------', this.content)
    },
    init () {
      sepDataDicInfoQuery().then(res => {
        this.comData = res.data
      })
      // 荣誉级别
      getHonor().then(res => {
        this.honorLevels = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 5px;
}
  .app-inner {
    position: relative;
          .picList{
      .avatar-box :first-child {
        margin-left: 0;
      }
      .avatar {
        float: left;
        margin-left: 10px;
        margin-bottom: 10px;
        >img{
            width: 100% !important;;
            height: 100% !important;
        }
      }
      }
    .el-tabs-root {
      /deep/ {
          .el-descriptions-item__cell{
            padding: 0 10px 10px 10px;
          }
        .el-tabs__content {
          height: 480px;
          overflow:auto;
        }
        // 校史发展 教学理念 校园特色场景 学校荣誉
        .school-history-development, .teaching-concept, .campus-characteristic-scene, .school-honors {
          .el-descriptions-item__label {
            flex: 0.1;
          }
          .el-descriptions-item__content {
            flex: 1;
          }
        }
      }
    }
    .el-dialog--center .el-dialog__body {
      height: 620px;
    }
    .dialog-footer {
      position: absolute;
      bottom: 10px;
      .btn-close {
        margin-left: -100px;
      }
      .btn-preservation {
        margin-left: 100px;
      }
    }
  }
  .line{
  display: inline-block;
  width: 50%;
}

.fimg{
  width:100%;
  height: 100%;
}
</style>
<style>
      .title7 {
        float: left;
        min-width: 120px;
      }
</style>
